@extends('layouts.default')
@section('main')
    <link rel="stylesheet" href="/css/uniform.css" />
    <link rel="stylesheet" href="/css/select2.css" />

    <script type="text/javascript" src="{{URL::asset('js/')}}/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="{{URL::asset('js/')}}/hightcharts/highcharts.js"></script>
    <script src="{{URL::asset('js/My97DatePicker/')}}/WdatePicker.js"></script>

    <script>
        //初始函数，设置定时器，定时取数据
        $(function () {
            queryDayRegData();
        });

        //图表属性，不包含数据
        var dayUseOptions = {
            chart: {
                renderTo:'dayUseCon',
                type:'spline'
            },
            title: {
                text: '直通车日对接数据统计',
                x: -20 //center
            },
            xAxis:{

            },
            yAxis: {
                title: {
                    text: '日对接次数'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            series: [
                {
                color : "#f7a35c",
                name:'项目方申请并成功的对接'
            },
                {
                    color : "#90ed7d",
                    name:'投资方邀约并成功的对接'
                }
            ],
            tooltip: {
                crosshairs: [{
                    width: 3,
                    color: 'green'
                }, {
                    width: 3,
                    color: 'green'
                }],


                valueSuffix: '次'
            },
            credits:{
                // enabled:true,                    // 默认值，如果想去掉版权信息，设置为false即可
                text:'无界投融',               // 显示的文字
                href:'',   // 链接地址
                position:{                          // 位置设置
                    align: 'left',
                    x: 1050,
                    verticalAlign: 'bottom',
                    y: -30
                },
                style: {                            // 样式设置
                    cursor: 'pointer',
                    color: 'blue',
                    fontSize: '10px'
                }
            },
            plotOptions: {
                spline:{
                    dataLabels: {
                        enabled: true
                    },
                    animation:false
                }
            }
        };

        var weekUseOptions = {
            chart: {
                renderTo:'weekUseCon',
                type:'spline'
            },
            title: {
                text: '直通车周对接数据统计',
                x: -20 //center
            },
            xAxis:{

            },
            yAxis: {
                title: {
                    text: '周对接次数'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            series: [
                {
                    color : "#f7a35c",
                    name:'项目方申请并成功的对接'
                },
                {
                    color : "#90ed7d",
                    name:'投资方邀约并成功的对接'
                }
            ],
            tooltip: {
                valueSuffix: '次'
            },
            credits:{
                // enabled:true,                    // 默认值，如果想去掉版权信息，设置为false即可
                text:'无界投融',               // 显示的文字
                href:'',   // 链接地址
                position:{                          // 位置设置
                    align: 'left',
                    x: 1050,
                    verticalAlign: 'bottom',
                    y: -30
                },
                style: {                            // 样式设置
                    cursor: 'pointer',
                    color: 'blue',
                    fontSize: '10px'
                }
            },
            plotOptions: {
                spline:{
                    dataLabels: {
                        enabled: true
                    },
                    animation:false
                }
            }
        };

        var monthUseOptions = {
            chart: {
                renderTo:'monthUseCon',
                type:'spline'
            },
            title: {
                text: '直通车月对接数据统计',
                x: -20 //center
            },
            xAxis:{

            },
            yAxis: {
                title: {
                    text: '月对接次数'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            series: [
                {
                    color : "#f7a35c",
                    name:'项目方申请并成功的对接'
                },
                {
                    color : "#90ed7d",
                    name:'投资方邀约并成功的对接'
                }
            ],
            tooltip: {
                valueSuffix: '次'
            },
            credits:{
                // enabled:true,                    // 默认值，如果想去掉版权信息，设置为false即可
                text:'无界投融',               // 显示的文字
                href:'',   // 链接地址
                position:{                          // 位置设置
                    align: 'left',
                    x: 1050,
                    verticalAlign: 'bottom',
                    y: -30
                },
                style: {                            // 样式设置
                    cursor: 'pointer',
                    color: 'blue',
                    fontSize: '10px'
                }
            },
            plotOptions: {
                spline:{
                    dataLabels: {
                        enabled: true
                    },
                    animation:false
                }
            }
        };


        var dayUseCategories = [];
        var pAarrDayUseDatas = [];
        var iAarrDayUseDatas = [];

        var weekUseCategories = [];
        var pAarrWeekUseDatas = [];
        var iAarrWeekUseDatas = [];

        var monthUseCategories = [];
        var pAarrMonthUseDatas = [];
        var iAarrMonthUseDatas = [];


        //Ajax 获取数据并解析创建Highcharts图表
        function queryDayRegData() {
            $.ajax({
                url:'/ztcstatistic/day-use',
                dataType:"json",
                success:function(data) {
                    $.each(data.pAarr,function(i,n){
                        dayUseCategories[i] = n[0];
                        pAarrDayUseDatas[i] = n[1]*1;
                    });

                    $.each(data.iAarr,function(i,n){
                        iAarrDayUseDatas[i] = n[1]*1;
                    });

                    dayUseOptions.xAxis.categories = dayUseCategories;
                    dayUseOptions.series[0].data = pAarrDayUseDatas;
                    dayUseOptions.series[1].data = iAarrDayUseDatas;
                    chart = new Highcharts.Chart(dayUseOptions);
                }
            });

            $.ajax({
                url:'/ztcstatistic/week-use',
                dataType:"json",
                success:function(data) {
                    $.each(data.pAarr,function(i,n){
                        weekUseCategories[i] = n[0];
                        pAarrWeekUseDatas[i] = n[1]*1;
                    });

                    $.each(data.iAarr,function(i,n){
                        iAarrWeekUseDatas[i] = n[1]*1;
                    });
                    weekUseOptions.xAxis.categories = weekUseCategories;
                    weekUseOptions.series[0].data = pAarrWeekUseDatas;
                    weekUseOptions.series[1].data = iAarrWeekUseDatas;
                    chart = new Highcharts.Chart(weekUseOptions);
                }
            });

            $.ajax({
                url:'/ztcstatistic/month-use',
                dataType:"json",
                success:function(data) {
                    $.each(data.pAarr,function(i,n){
                        monthUseCategories[i] = n[0];
                        pAarrMonthUseDatas[i] = n[1]*1;
                    });

                    $.each(data.iAarr,function(i,n){
                        iAarrMonthUseDatas[i] = n[1]*1;
                    });
                    monthUseOptions.xAxis.categories = monthUseCategories;
                    monthUseOptions.series[0].data = pAarrMonthUseDatas;
                    monthUseOptions.series[1].data = iAarrMonthUseDatas;
                    chart = new Highcharts.Chart(monthUseOptions);
                }
            });

        }

    </script>
    <div id="content">
        <div id="content-header">
            <div id="breadcrumb">
                <a href="{{url('home')}}" title="返回首页" class="tip-bottom"><i class="icon-home"></i> 首页</a>
            </div>
        </div>
        <div class="container-fluid">
            <div class="widget-title">
                <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#tab1">对接数</a></li>
                    <li><a data-toggle="tab" href="#tab3">数据表</a></li>
                </ul>
            </div>
            <div class="widget-content tab-content">
                <div id="tab1" class="tab-pane active">
                    <div>
                        <p>
                            <button class="btn tip-top" id="dayUse">日</button>
                            <button class="btn tip-left" id="weekUse">周</button>
                            <button class="btn tip-right" id="monthUse">月</button>
                        </p>
                        <div id="dayUseCon" style="width: 1100px; height: 400px; margin: 0 "></div>
                        <div id="weekUseCon" style="width: 1100px; height: 400px; margin: 0; display: none; "></div>
                        <div id="monthUseCon" style="width: 1100px; height: 400px; margin: 0; display: none; "></div>
                    </div>
                </div>

                <div id="tab3" class="tab-pane">
                    {{--<table>--}}
                    {{--<tr>--}}
                    {{--<th>--}}
                    {{--总会员数:--}}
                    {{--</th>--}}
                    {{--<th>--}}
                    {{--{{$total}}--}}
                    {{--</th>--}}
                    {{--</tr>--}}
                    {{--</table>--}}

                    <form action="{{url('ztcstatistic/export')}}" method="get" id="adForm">
                        <table>
                            <tr>
                                <th>
                                    <label >类型 :</label>
                                </th>
                                <th>
                                    <div class="controls">
                                        <select  name="type"  >
                                            <option value="">请选择</option>
                                            <option value="use">对接数</option>
                                        </select>
                                    </div>
                                </th>
                                <th>
                                    <label >开始时间 :</label>
                                </th>
                                <th>
                                    <div class="controls">
                                        <input type="text"  name="begin_time"
                                               placeholder="开始时间" onfocus="WdatePicker({startDate:'%y-%M-01 00:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss',alwaysUseStartDate:true})" />
                                    </div>
                                </th>
                                <th>
                                    <label >结束时间 :</label>
                                </th>
                                <th>
                                    <div class="controls">
                                        <input type="text"  name="end_time"
                                               placeholder="结束时间" onfocus="WdatePicker({startDate:'%y-%M-01 00:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss',alwaysUseStartDate:true})" />
                                    </div>
                                </th>
                                <th>
                                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                    <div class="controls">
                                        <button type="button" name="find" class="btn btn-info">查询</button>
                                        <button type="submit" class="btn btn-info">导出</button>
                                    </div>
                                </th>
                            </tr>
                        </table>
                    </form>
                    <div id="result">
                    </div>
                    <div id="ajaxPage"></div>
                </div>
            </div>
        </div>


    </div>
    <script src="/js/matrix.tables.js"></script>
    <script type="text/javascript" src="{{URL::asset('js/')}}/common.js"></script>

    <script>
        $("#dayUse").click(function(){
            $("#dayUseCon").show();
            $("#weekUseCon").hide();
            $("#monthUseCon").hide();
        });

        $("#weekUse").click(function(){
            $("#dayUseCon").hide();
            $("#weekUseCon").show();
            $("#monthUseCon").hide();
        });

        $("#monthUse").click(function(){
            $("#dayUseCon").hide();
            $("#weekUseCon").hide();
            $("#monthUseCon").show();
        });

        //异步获取
        $('button[name=find]').click(function(){
            ajaxRequest($('#adForm').serializeArray(),"{{url('ztcstatistic/find')}}",function(data){
                if(data.status){
                    var html='<table class="table table-bordered table-striped">';
                    html+='<thead>';
                    html+='<tr>';
                    html+='<th>投资人用户名</th>';
                    html+='<th>项目名</th>';
                    html+='<th>项目方真实姓名</th>';
                    html+='<th>项目方电话</th>';
                    html+='<th>对接直通车理由</th>';
                    html+='<th>开始时间</th>';
                    html+='<th>结束时间</th>';
                    html+='<th>类型</th>';
                    html+='<th>状态</th>';
                    html+='</tr>';
                    html+='</thead>';
                    html+='<tbody>';
                    $.each(data.message.list,function(i,e){
                        html+='<tr class="gradeX">';
                        html+='<td>'+e.investName+'</td>';
                        html+='<td>'+e.projectName+'</td>';
                        html+='<td>'+e.realname+'</td>';
                        html+='<td>'+e.phone+'</td>';
                        html+='<td>'+e.reason+'</td>';
                        html+='<td>'+e.begin_time+'</td>';
                        html+='<td>'+e.end_time+'</td>';
                        html+='<td>'+e.is_send+'</td>';
                        html+='<td>'+e.status+'</td>';
                        html+='<tr>';
                    })

                    $("#ajaxPage").html(data.message.page);
                    $("#result").html(html);
                }else{
                    alert('没有您要查找的数据');
                }
            });
        });

        /*
         * 异步分页
         */
        $("body").on('click','#ajaxPage li',function(){
            if(!$(this).hasClass('pagemore')){
                var page = $(this).attr('value');
                var params = {};
                params['page'] = page;
                params['begin_time'] = $("input[name='begin_time']").val();
                params['end_time'] = $('input[name=end_time]').val();
                params['type'] = $('select[name=type').val();

                if(page==0){
                    return false;
                }
                ajaxRequest(params,'ztcstatistic/find',function(data){
                    if(data.status){
                        var html='<table class="table table-bordered table-striped">';
                        html+='<thead>';
                        html+='<tr>';
                        html+='<th>投资人用户名</th>';
                        html+='<th>项目名</th>';
                        html+='<th>项目方真实姓名</th>';
                        html+='<th>项目方电话</th>';
                        html+='<th>对接直通车理由</th>';
                        html+='<th>开始时间</th>';
                        html+='<th>结束时间</th>';
                        html+='<th>类型</th>';
                        html+='<th>状态</th>';
                        html+='</tr>';
                        html+='</thead>';
                        html+='<tbody>';
                        $.each(data.message.list,function(i,e){
                            html+='<tr class="gradeX">';
                            html+='<td>'+e.investName+'</td>';
                            html+='<td>'+e.projectName+'</td>';
                            html+='<td>'+e.realname+'</td>';
                            html+='<td>'+e.phone+'</td>';
                            html+='<td>'+e.reason+'</td>';
                            html+='<td>'+e.begin_time+'</td>';
                            html+='<td>'+e.end_time+'</td>';
                            html+='<td>'+e.is_send+'</td>';
                            html+='<td>'+e.status+'</td>';
                            html+='<tr>';
                        })

                        $("#ajaxPage").html(data.message.page);
                        $("#result").html(html);
                    }else{
                        alert('没有您要查找的数据');
                    }
                });
            }
        });

        //跳转分页
        $("#ajaxPage").on('click','.ajaxPagegoto',function(){
            var page = $(".page-num").val();
            var params = {};
            params['page'] = page;
            params['begin_time'] = $('input[name=begin_time]').val();
            params['end_time'] = $('input[name=end_time]').val();
            params['type'] = $('select[name=type').val();

            if(page == undefined){
                showMessage("error",'请输入正确的跳转页数');
            }else{
                var lastpage = $("#ajaxPage .lastpage").attr('value');
                if(parseInt(page)>parseInt(lastpage)){
                    page = lastpage;
                }
                ajaxRequest(params,'ztcstatistic/find',function(data){
                    if(data.status){
                        var html='<table class="table table-bordered table-striped">';
                        html+='<thead>';
                        html+='<tr>';
                        html+='<th>投资人用户名</th>';
                        html+='<th>项目名</th>';
                        html+='<th>项目方真实姓名</th>';
                        html+='<th>项目方电话</th>';
                        html+='<th>对接直通车理由</th>';
                        html+='<th>开始时间</th>';
                        html+='<th>结束时间</th>';
                        html+='<th>类型</th>';
                        html+='<th>状态</th>';
                        html+='</tr>';
                        html+='</thead>';
                        html+='<tbody>';
                        $.each(data.message.list,function(i,e){
                            html+='<tr class="gradeX">';
                            html+='<td>'+e.investName+'</td>';
                            html+='<td>'+e.projectName+'</td>';
                            html+='<td>'+e.realname+'</td>';
                            html+='<td>'+e.phone+'</td>';
                            html+='<td>'+e.reason+'</td>';
                            html+='<td>'+e.begin_time+'</td>';
                            html+='<td>'+e.end_time+'</td>';
                            html+='<td>'+e.is_send+'</td>';
                            html+='<td>'+e.status+'</td>';
                            html+='<tr>';
                        })

                        $("#ajaxPage").html(data.message.page);
                        $("#result").html(html);
                    }else{
                        alert('没有您要查找的数据');
                    }
                });
            }
        });

    </script>

@stop
